import React, { Component } from 'react';
import { Input } from 'antd';
import { isArray, map, isObject, omit, isEmpty } from 'lodash';
import { renderComponentItem } from '/common/utils/renderCompTpl';
import { connect } from 'dva';
import { PageHeader } from 'ant-design-pro';

const { Group } = Input;

@connect(({ global }) => ({ global }))
class PageHeaderComp extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const tabComp = this.props.compSetting.tabComp;
    // console.log(tabComp);
    if (isObject(tabComp) && 'COMBO_BOX' === tabComp['_type']) {
      // 枚举类型的 tabNav，说明 tab 是需要从服务端获取数据之后，动态生成的，比如【科目列表】中的【科目类型 tab】
      const { dispatch } = this.props;
      dispatch({
        type: 'global/findByCode',
        payload: {
          code: tabComp['_selector'],
        },
      });
    }
  }

  render() {
    const { compSetting } = this.props;

    const title = compSetting.title ? compSetting.title : '';
    // 面包屑
    const breadcrumbList = compSetting.breadcrumbList ? compSetting.breadcrumbList : [];

    // 操作区
    const actionSetting = compSetting.action;
    let action;
    if (isArray(actionSetting)) {
      action = (
        <Group>
          {
            map(actionSetting, (aVal, aKey) => (
              renderComponentItem(aVal, aKey)
            ))
          }
        </Group>
      );
    } else {
      action = null;
    }

    // tab
    let tabList = [
      // {
      //   key: '1',
      //   tab: '资产',
      // }
    ];
    const tabComp = compSetting.tabComp;
    if (isObject(tabComp)) {
      if ('COMBO_BOX' === tabComp['_type']) {
        // 枚举类型的 tabNav，说明 tab 是需要从服务端获取数据之后，动态生成的，比如【科目列表】中的【科目类型 tab】
        const { global } = this.props;
        if (!isEmpty(global) && !isEmpty(global[tabComp['_selector']])) {
          // 已经获得动态数据
          const comboList = global[tabComp['_selector']];
          tabList = map(comboList, (cVal) => ({
            key: cVal.code,
            tab: cVal.name,
          }));
        }
      } else if ('TAB_NAV' === tabComp['_type']) {
        // 普通的 tabNav 组件
      }
    }

    return (
      <PageHeader
        {...omit(this.props, ['compSetting', 'global', 'dispatch'])}
        title={title}
        breadcrumbList={breadcrumbList}
        action={action}
        tabList={tabList}
      />
    );
  }
}

/**
 * compSetting: {
    "_type": "PAGE_HEADER",
    "title": "会计科目",
    "breadcrumbList": [
      {
        "title": "设置"
      },
      {
        "title": "科目"
      }
    ],
    "action": [
      {
        "_type": "SEARCH_INPUT",
        "_dataField": "s_str"
      },
      {
        "_type": "BUTTON",
        "_dataField": "createButton",
        "_desc": "新建科目",
        "_styleType": "primary"
      },
      {
        "_type": "BUTTON",
        "_dataField": "importButton",
        "_desc": "导入"
      },
      {
        "_type": "BUTTON",
        "_dataField": "exportButton",
        "_desc": "导出"
      }
    ],
    "tabComp": {
      "_type": "COMBO_BOX",
      "_dataField": "category",
      "_desc": "科目类别",
      "_selector": "ACCOUNTING_ITEM_CATEGORY"
    }
  },
 */

export default PageHeaderComp;
